<template>
  <div v-if="visible" class="set-box">
    <h3 class="set-title">商品搜索</h3>
    <el-form :model="searchForm" ref="searchForm" label-width="76px">
      <div class="set-part mt20">
        <el-form-item label="框体样式" prop="blockClass">
          <div class="flex">
            <div class="val-show flex-1">{{searchForm.blockClass | filterRadio(blockOption)}}</div>
            <en-radio-tab
              :optionsData="blockOption"
              :defaultData="searchForm.blockClass"
              v-model="searchForm.blockClass">
            </en-radio-tab>
          </div>
        </el-form-item>
        <el-form-item label="文本位置" prop="textAlign">
          <div class="flex">
            <div class="val-show flex-1">{{searchForm.textAlign | filterRadio(textAlignOption)}}</div>
            <en-radio-tab
              :optionsData="textAlignOption"
              :defaultData="searchForm.textAlign"
              v-model="searchForm.textAlign">
            </en-radio-tab>
          </div>
        </el-form-item>
        <el-form-item label="框体高度" prop="height">
          <div class="flex">
            <el-slider class="row-slider" :min="0" :max="40" v-model.number="searchForm.height"></el-slider>
            <el-input class="row-input" v-model.number="searchForm.height"></el-input>
          </div>
        </el-form-item>
        <el-form-item label="页面间距" prop="pagePadding">
          <div class="flex">
            <el-slider class="row-slider" :min="0" :max="30" v-model.number="searchForm.pagePadding"></el-slider>
            <el-input class="row-input" v-model.number="searchForm.pagePadding"></el-input>
          </div>
        </el-form-item>
        <el-form-item label="背景颜色" prop="backColor">
          <div class="flex">
            <div class="val-show flex-1">{{searchForm.backColor}}</div>
            <el-color-picker v-model="searchForm.backColor"></el-color-picker>
          </div>
        </el-form-item>
        <el-form-item label="框体颜色" prop="blockBack">
          <div class="flex">
            <div class="val-show flex-1">{{searchForm.blockBack}}</div>
            <el-color-picker v-model="searchForm.blockBack"></el-color-picker>
          </div>
        </el-form-item>
        <el-form-item label="文本颜色" prop="fontColor">
          <div class="flex">
            <div class="val-show flex-1">{{searchForm.fontColor}}</div>
            <el-color-picker v-model="searchForm.fontColor"></el-color-picker>
          </div>
        </el-form-item>
      </div>
    </el-form>
    <el-button type="primary" @click="handleConfirm">数据提交</el-button>
  </div>
</template>

<script>
  import mixin from '../../mixin';

  export default {
    name: 'EnSearchPicker',
    mixins: [mixin],
    props: {
      show: {
        type: Boolean,
        default: false
      },
      // 默认数据
      defaultData: {
        type: Object,
        default: () => ({})
      }
    },
    data() {
      return {
        visible: this.show,
        textForm: {},
        searchForm: {},

        blockOption: [{
          value: 'rect',
          label: '方形',
          icon: 'fonticon-search-rect'
        },{
          value: 'circle',
          label: '圆形',
          icon: 'fonticon-search-circle'
        }],
        textAlignOption: [{
          value: 'left',
          label: '居左',
          icon: 'fonticon-align-left'
        },{
          value: 'center',
          label: '居中',
          icon: 'fonticon-align-center'
        }]
      }
    },
    watch: {
      show(newVal) {
        this.visible = newVal
      },
      visible(newVal) {
        newVal === false && this.$emit('close')
      },
      defaultData(newVal) {
        if (!newVal) {
          return;
        };
        let _showData = JSON.parse(JSON.stringify(newVal));
        this.searchForm = {
          ..._showData.style,
          'blockClass': _showData.class
        };
      }
    },
    methods: {
      handleConfirm() {
        this.$refs['searchForm'].validate((valid) => {
          if (valid) {
            this.$emit('confirm', this.searchForm);
          } else {
            this.$message.error('表单填写有误，请核对！')
            return false
          }
        })
      }
    }
  }
</script>